<!DOCTYPE html>

<html>
    <head>
        <title>Vanilla MSAL.JS</title>
        <meta charset="utf-8" />
        <style type="text/css">body { font-family: Tahoma; padding: 3em; }</style>
        <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.5/js/msal.js"></script>
    </head>

    <body>
        <a href=".\">&lt; Back</a>
        <h4>MSAL</h4>
        <p>
            <a id="login_button" href="#" onclick="login(); return false;">Log in</a>
            <a id="logout_button" href="#" onclick="logout(); return false;">Log out</a>
        </p>

        <p id="username"></p>
        <pre id="api_response"></pre>

        <script type="text/javascript">
            document.getElementById('login_button').style.display = "none";
            document.getElementById('logout_button').style.display = "none";

            // Set up MSAL
            var applicationConfig = {
                clientID: '9f064d41-aa20-4561-9aa5-d1a63f2c6130',
                graphEndpoint: "https://graph.microsoft.com/v1.0/me/sendMail",
                graphScopes: ["user.read", "mail.send"],
                authority: "https://login.microsoftonline.com/microsoft.onmicrosoft.com/"
            };

            var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback, {cacheLocation: "localStorage"});
            function authCallback(errorDesc, token, error, tokenType) {
                //This function is called after loginRedirect and acquireTokenRedirect. Use tokenType to determine context. 
                //For loginRedirect, tokenType = "id_token". For acquireTokenRedirect, tokenType:"access_token".
                if (token) {
                    this.acquireTokenSilent(applicationConfig.graphScopes).then(function (access_token) {
                        // Change button to Sign Out
                        document.getElementById('api_response').textContent = 'Calling API...';

                        var xhr = new XMLHttpRequest();

                        xhr.open('GET', 'https://graph.microsoft.com/v1.0/me', true);
                        xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);

                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                document.getElementById('api_response').textContent = JSON.stringify(JSON.parse(xhr.responseText), null, '  ');
                            } else {
                                document.getElementById('api_response').textContent = 'ERROR:\n\n' + xhr.responseText;
                            }
                        };

                        xhr.send();
                    }, function (error) {
                        console.log(error);
                        this.acquireTokenPopup(applicationConfig.graphScopes).then(function (access_token) {

                        }, function (error) {
                            console.log(error);
                        });
                    });
                }
                else if (errorDesc || error) {
                    console.log(error + ':' + errorDesc);
                }
            }

            function login() {
               // clientApplication.loginRedirect(applicationConfig.graphScopes);
                clientApplication.loginPopup(applicationConfig.graphScopes);
            }

            function logout() {
                if (clientApplication) {
                    clientApplication.logout();
                }
            }

            var user = clientApplication.getUser();
            if (user) {
                document.getElementById('logout_button').style.display = "block";
                document.getElementById('username').textContent = 'Signed in as: ' + user.displayableId;
                document.getElementById('api_response').textContent = 'Calling Graph API...';
                clientApplication.acquireTokenSilent(applicationConfig.graphScopes).then(function (access_token) {
                    var xhr = new XMLHttpRequest();

                    xhr.open('GET', 'https://graph.microsoft.com/v1.0/me', true);
                    xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);

                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            document.getElementById('api_response').textContent = JSON.stringify(JSON.parse(xhr.responseText), null, '  ');
                        } else {
                            document.getElementById('api_response').textContent = 'ERROR:\n\n' + xhr.responseText;
                        }
                    };

                    xhr.send();
                }, function (error) {
                    console.log(error);
                    this.acquireTokenPopup(applicationConfig.graphScopes).then(function (access_token) {

                    }, function (error) {
                        console.log(error);
                        document.getElementById('api_response').textContent = error;
                    });
                });
            } else {
                document.getElementById('login_button').style.display = "block";
                document.getElementById('username').textContent = 'Not signed in.';
            }

        </script>
    </body>
</html>